/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View, Image, Platform, TouchableOpacity
} from 'react-native';

import TopBanner from './TopBanner';
import NoticePrompt from './NoticePrompt';

export default class extends Component {
  constructor(props) {
    super(props);
  }

  static navigationOptions = ({ navigation }) => ({
    headerTitle: '平安工程',
  });

  _onPress = (page) => {
    this.props.navigation.navigate(page);
  };

  render() {
    // const { navigator } = this.props;
    const menuList = [
      {
        menuName: '通知公告',
        menuIcon: 'icon_home_notice_menu',
        page: 'NoticesList'
      }, {
        menuName: '随手拍',
        menuIcon: 'icon_home_carme_menu',
        page: 'PreSafetyCheck'
      }, {
        menuName: '整改与回复',
        menuIcon: 'icon_home_safety_reply_menu',
        page: 'RectifyAndReply'
      }, {
        menuName: '通讯录',
        menuIcon: 'icon_home_phone_book_menu',
        page: 'PhoneBook'
      }, {
        menuName: '视频监控',
        menuIcon: 'icon_home_video_menu',
      }, {
        menuName: '扫一扫',
        menuIcon: 'icon_home_saosao_menu',
        page:'QRScanner'
      }
    ];


    return (
      <View style={styles.container}>
        <TopBanner style={{ flex: 1 }}/>
        <NoticePrompt/>
        <View style={styles.menuList}>

          {
            menuList.map(
              item =>
                <TouchableOpacity key={item.menuName} onPress={() => this._onPress(item.page)}
                                    style={styles.menuItem}>
                  <View style={{alignItems: 'center',}}>
                    <Image source={{ uri: item.menuIcon }} style={{ width: 45, height: 45 }}/>
                    <Text style={{ width:'100%',color: '#2f2f2f', marginTop: 15 }}>{item.menuName}</Text>
                  </View>
                </TouchableOpacity>
            )
          }

        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    flexDirection: 'column',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  menuList: {
    width: '100%',
    backgroundColor: '#fff',
    marginTop: 10,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    flexWrap: 'wrap'
  },
  menuItem: {

    marginTop: 20,
    marginBottom: 20,
    width: '30%',
    justifyContent: 'center',
    alignItems: 'center',
  }
});

